<script setup>
	import config from './config'
	import { cloneDeep } from 'lodash-es'
	import datasetApi from '@/views/plugin/dashboard/api/datasetApi'
	import { designStore } from '@/views/plugin/dashboard/store'
	const useDesignStore = designStore()
	const props = defineProps({
		config: {
			type: Object,
			default: () => config
		}
	})
	const container = computed(() => ({
		padding: `${props.config.style.paddingT}px ${props.config.style.paddingR}px ${props.config.style.paddingB}px ${props.config.style.paddingL}px`,
		background: props.config.style.bgColor,
		borderColor: props.config.style.borderColor,
		borderWidth: props.config.style.borderWidth + 'px',
		borderStyle: props.config.style.borderStyle,
		borderTopLeftRadius: props.config.style.bgRTL + 'px',
		borderTopRightRadius: props.config.style.bgRTR + 'px',
		borderBottomLeftRadius: props.config.style.bgRBL + 'px',
		borderBottomRightRadius: props.config.style.bgRBR + 'px',
		boxShadow: `${props.config.style.shadowX}px ${props.config.style.shadowY}px ${props.config.style.shadowDegree}px ${props.config.style.shadowColor}`
	}))
	const titleStyle = computed(() => ({
		justifyContent: props.config.style.align,
		fontSize: props.config.style.titleSize + 'px',
		color: props.config.style.titleColor,
		fontWeight: props.config.style.titleWeight ? 800 : 500,
		fontStyle: props.config.style.titleStyle ? 'italic' : '',
		textDecoration: props.config.style.titleLine ? 'underline' : ''
	}))
	const titleIconStyle = computed(() => ({
		fontSize: props.config.style.titleIconSize + 'px',
		color: props.config.style.titleIconColor
	}))

	const titleEndStyle = computed(() => ({
		fontSize: props.config.style.titleEndSize + 'px',
		color: props.config.style.titleEndColor,
		fontWeight: props.config.style.titleEndWeight ? 800 : 500,
		fontStyle: props.config.style.titleEndStyle ? 'italic' : '',
		textDecoration: props.config.style.titleEndLine ? 'underline' : ''
	}))
	const titleEndIconStyle = computed(() => ({
		fontSize: props.config.style.titleEndIconSize + 'px',
		color: props.config.style.titleEndIconColor
	}))

	const sortStyle = computed(() => ({
		fontSize: props.config.style.sortSize + 'px',
		color: props.config.style.sortColor,
		fontWeight: props.config.style.sortWeight ? 800 : 500,
		fontStyle: props.config.style.sortStyle ? 'italic' : '',
		textDecoration: props.config.style.sortLine ? 'underline' : ''
	}))

	const mainContentStyle = computed(() => ({
		fontSize: props.config.style.mainContentSize + 'px',
		color: props.config.style.mainContentColor,
		fontWeight: props.config.style.mainContentWeight ? 800 : 500,
		fontStyle: props.config.style.mainContentStyle ? 'italic' : '',
		textDecoration: props.config.style.mainContentLine ? 'underline' : '',
		width: props.config.style.mainContentWSize + '%'
	}))

	const subContentStyle = computed(() => ({
		fontSize: props.config.style.subContentSize + 'px',
		color: props.config.style.subContentColor,
		fontWeight: props.config.style.subContentWeight ? 800 : 500,
		fontStyle: props.config.style.subContentStyle ? 'italic' : '',
		textDecoration: props.config.style.subContentLine ? 'underline' : ''
	}))
	const dataBoxStyle = computed(() => ({
		borderBottomColor: props.config.style.lineColor,
		borderBottomWidth: props.config.style.lineWidth + 'px',
		borderBottomStyle: props.config.style.lineStyle
	}))
	const iconStyle = computed(() => ({
		fontSize: props.config.style.iconSize + 'px',
		color: props.config.style.iconColor
	}))

	const dataStyle = computed(() => ({
		fontSize: props.config.style.dataSize + 'px',
		color: props.config.style.dataColor,
		fontWeight: props.config.style.dataWeight ? 800 : 500,
		fontStyle: props.config.style.dataStyle ? 'italic' : '',
		textDecoration: props.config.style.dataLine ? 'underline' : '',
		marginTop: !props.config.style.dataUp ? props.config.style.spacing + 'px' : '0px',
		marginBottom: props.config.style.dataUp ? props.config.style.spacing + 'px' : '0px'
	}))
	const iconBoxStyle = computed(() => ({
		display: props.config.style.iconShow ? 'flex' : 'none',
		backgroundColor: props.config.style.iconBgColor,
		height: props.config.style.iconBgSize + 'px',
		width: props.config.style.iconBgSize + 'px',
		borderTopLeftRadius: props.config.style.iconRTL + 'px',
		borderTopRightRadius: props.config.style.iconRTR + 'px',
		borderBottomLeftRadius: props.config.style.iconRBL + 'px',
		borderBottomRightRadius: props.config.style.iconRBR + 'px'
	}))
	const titleMoreStyle = computed(() => ({
		color: props.config.style.iconColor,
		fontSize: props.config.style.iconSize + 'px'
	}))

	// 接数据源
	const formState = ref(cloneDeep(props.config.data))
	const dataSource = ref({})
	const oldDataSetJson = ref({})
	// 获取数据源数据函数
	const fetchChartData = async (isFlag = false) => {
		const { dataSetType, dataSetJson } = props.config.dataSetConfig
		const isNew = isFlag || JSON.stringify(oldDataSetJson.value) !== JSON.stringify(dataSetJson)
		formState.value = props.config.data
		current.value = 1
		// 如果是静态数据
		if (dataSetType === 0) return

		// 仅在 dataSetId 实际改变时才重新获取数据
		if (dataSetType === 1 && dataSetJson && Object.keys(dataSetJson).length > 0 && isNew) {
			// 更新值
			oldDataSetJson.value = dataSetJson
			// 模拟接口返回下拉数据
			await datasetApi.preview(dataSetJson).then((res) => {
				dataSource.value = res || []
				formState.value.listValue.value = res || []
			})
		}
	}

	const onReload = (isFlag = false) => {
		fetchChartData(isFlag)
	}
	defineExpose({ onReload })

	// 分页
	const current = ref(1)
	const list = computed(() => {
		if (props.config.style.pagination) {
			const pageSize = props.config.style.pageSize
			const list = formState.value.listValue.value.slice(
				(current.value - 1) * pageSize,
				(current.value - 1) * pageSize + pageSize
			)
			return list
		} else {
			return formState.value.listValue.value
		}
	})
	// 表格高度
	const listY = ref(300)
	watch(
		() => props.config.h,
		() => {
			nextTick(() => {
				const height = document.getElementById('box' + props.config.i)?.clientHeight
				const pagination = props.config.style.pagination ? 52 : 0
				const h = height - props.config.style.paddingT - props.config.style.paddingB - 34 - pagination
				if (h) {
					listY.value = h
				}
			})
		},
		{ deep: true, immediate: true }
	)
	const maxVal = computed(() => {
		let maxVal = 0
		list.value.forEach((item) => {
			if (item[props.config.data.numValue?.field] > maxVal) {
				maxVal = item[props.config.data.numValue?.field]
			}
		})
		return maxVal
	})
</script>

<template>
	<div class="container" :style="container">
		<div class="flex justify-between mb-[15px]" :style="{ justifyContent: props.config.style.align }">
			<div class="flex items-center">
				<span
					:class="['mr-[8px]', 'iconfont', props.config.style.titleIcon]"
					:style="titleIconStyle"
					v-if="props.config.style.titleIconShow"
				></span>
				<div :style="titleStyle">{{ props.config.style.title }}</div>
			</div>
		</div>
		<div class="overflow-y-auto" :style="{ height: listY + 'px' }">
			<div class="column-box min-h-[48px]" :style="dataBoxStyle" v-for="(item, index) in list" :key="item">
				<div class="w-[20px] mr-[20px]" :style="sortStyle">{{ index + 1 + (current - 1) * 10 }}</div>
				<div class="column-title mr-[20px]" :style="mainContentStyle">{{ item[props.config.data.title?.field] }}</div>
				<div class="flex flex-1 items-center h-[100%]" v-if="props.config.style.chartShow">
					<a-progress
						style="width: 100%"
						status="normal"
						:stroke-color="props.config.style.chartColor"
						:percent="Math.floor((item[props.config.data.numValue?.field] / maxVal) * 100)"
						:showInfo="props.config.style.chartPercentShow"
					/>
				</div>
				<div class="w-[50px] ml-[20px]" v-if="props.config.style.subContentShow" :style="subContentStyle">
					{{ item[props.config.data.numValue?.field] }}{{ props.config.style.unitNum }}
				</div>
			</div>
		</div>
		<div class="flex justify-end mt-[20px]" v-if="props.config.style.pagination">
			<a-pagination
				v-model:current="current"
				:total="formState.listValue.value.length"
				:pageSize="props.config.style.pageSize"
			/>
		</div>
	</div>
</template>

<style scoped lang="less">
	.container {
		// 修改圆角半径为不同的值
		// border-radius: 10px; // 调整为图片中的圆角弧度
		// 添加阴影效果
		// box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
		padding: 25px; // 增加内边距
		overflow: hidden;
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		// background-color: white;
	}

	.column-box {
		display: flex;
		align-items: center;
		padding: 5px 1px;
		margin: 5px;
	}
	.type-icon {
		border: 1px solid #ccc;
		padding: 4px 10px;
		border-radius: 2px;
	}
	.column-title {
		width: 25%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	:where(.css-dev-only-do-not-override-1vncnly).ant-progress-line {
		margin-bottom: 0px;
	}
</style>
